<template>
	<view class="bigContainer" style="position:relative">
		
			<!-- 头部搜索部分 -->
			<view class="headerContainer">
				<image src="../../static/images/logo.png" mode=""></image>
				<view class="searchContainer">
					<i class="iconfont icon-sousuo"></i>
					<input type="text" placeholder="搜索商品">
				</view>
				<button>登录</button>
			</view>
			<!-- 轮播图上面的滑块部分 -->
			<scroll-view scroll-x class="navContainer" enable-flex  >
				<view class="navItem active">推荐</view>
				<view class="navItem" v-for="(item,index) in kingKongList" :key="item.L1Id">{{item.text}}</view>
				
			</scroll-view>
			

		
		<!--轮播图部分  -->
		<swiper circular class="swiperContainer" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="1000">
			<swiper-item>
				<image src="https://yanxuan.nosdn.127.net/static-union/1657246290000030.jpg" ></image>
			</swiper-item>
			<swiper-item>
				<image src="https://yanxuan.nosdn.127.net/static-union/165594947837b102.jpg" ></image>
			</swiper-item>
			<swiper-item>
				<image src="https://yanxuan.nosdn.127.net/static-union/1657012387190cee.jpg" ></image>
			</swiper-item>
			
			
		
		</swiper>
		<!-- 无忧退货部分 -->
		<view class="serverContainer">
			<view class="serverItem" v-for="(item,index) in initData.policyDescList" :key="index">
				<image :src="item.icon" mode=""></image>
				<text>{{item.desc}}</text>
			</view>
			
		</view>
		<!-- 导航列表部分 -->
		<view class="navListContianer">
			<view class="navItem" v-for="item in kingKongList">
				<image :src="item.picUrl"></image>
				<text>{{item.text}}</text>
			</view>
		
		
			
		</view>
		<!--详情列表部分  -->
		<Category :categoryModule='initData.categoryModule'/>
	</view>
</template>

<script>
	import Category from '../../components/Category/Category.vue'
	import request from '../../utils/request.js'
	import {mapState,mapGetters} from 'vuex'
	export default {
		data() {
			return {
				     //首页初始化的数据
			}
		},
		computed:{
			...mapState({
				initData:state => state.indexData.indexData
			}),
			...mapGetters(['kingKongList'])
		},
		methods:{
			// 获取首页的数据
		async	getIndexData(){
				// const result = await request('/indexData')
				// if(result.code == 200){
				// 	this.indexData = result.indexData
				// }
				this.$store.dispatch('indexData/getIndexData')
			}
		},
		mounted() {
			// 页面挂载完发请求
			this.getIndexData()
		},
		components:{
			Category
		},
		onLoad() {

		}

	}
</script>

<style lang="stylus">

	
	.headerContainer
		display: flex
		padding: 0 10rpx
		height: 60rpx
		position: fixed
		top: 0
		left: 0
		background-color: #fff
		z-index: 1
		image
			height: 100%
			width: 200rpx
		.searchContainer
			
			.iconfont
				margin-left: 20rpx
				font-size: 26rpx
			background-color: #eee
			display: flex
			line-height: 60rpx
			margin: 0 20rpx
			input 
				
				margin-left: 50rpx
				font-size: 26rpx
				text-align: center
				margin-top: 10rpx
		button
			width: 124rpx
			height: 60rpx
			line-height: 60rpx
			font-size: 26rpx
			color: #f89
			
	// 导航栏部分
	.navContainer
		position: fixed
		background-color: #fff
		z-index: 1
		top: 60rpx
		left: 0
		height: 60rpx
		display: flex
		white-space: nowrap
		font-size: 26rpx
		.navItem
			
			height: 100%
			line-height: 60rpx
			margin-left: 20rpx
			padding: 0 10rpx
			box-sizing: border-box
			&.active 
				border-bottom: 2rpx solid #f89


	// 轮播图部分
	.swiperContainer 
		margin-top: 120rpx
		width: 100%
		height: 300rpx
		image
			width: 100%
			height: 100%
	// 服务30天退货部分
	.serverContainer 
		box-sizing: border-box
		display: flex
		padding: 10rpx;
		justify-content: space-between
		vertical-align: middle
		.serverItem
			box-sizing: border-box
			display: flex
			align-items: center
			image
				width: 40rpx
				height: 40rpx
			text 
				font-size: 26rpx
				margin-left: 10rpx
			

	// navList 部分
	.navListContianer 
		box-sizing: border-box
		flex-wrap: wrap
		display: flex
		width: 100%
		padding: 10rpx
		.navItem 
			box-sizing: border-box
			width: 20%
			padding: 10rpx
			display: flex
			flex-direction: column
			image
				width: 100rpx
				height: 100rpx
				border-radius: 10rpx
			text 
				font-size: 26rpx
			





	.test
		color: #f89
			
		
		


</style>
